<template>
	<view class="hidden ">

		<view :style="{height:shh+'px'}"></view>
		<view>
			<view class="flex-ju-b con height50px">
				<view> <uni-icons size="23" color="#fff" type="personadd"></uni-icons>
					<uni-icons size="23" color="#fff" class="ml30" type="personadd"></uni-icons>
				</view>
				<view>通讯录</view>
				<view class="flex-a-i">
					<view @click="addsearch">
						<uni-icons size="25" type="search"></uni-icons>
					</view>
					<view @click="addfire" class="ml30">
						<uni-icons size="25" type="personadd"></uni-icons>
					</view>
				</view>

			</view>
			<uni-list>
				<uni-list-item title="新盆友" to="add" :badgeText="tabbar" showBadge thumb="/static/add.png"
					thumb-size="lg" />
			</uni-list>
		</view>
		<scroll-view class="list-wrap" scroll-y @scroll="scrollListener">
			<!-- 虚拟列表所有项的高度 -->
			<view class="scroll-bar" :style="{height:bheight}"></view>

			<!-- 虚拟列表项 -->
			<view class="list" :style="{top:top}">
				<uni-list :border="true">
				
				<template v-for="(item,index) in showList" :key="index">
					<uni-list-item v-if="uid == item.data.did" :to="'detail?name='+item.data.name+'&tuid='+item.data.tuid+'&avatar='+item.data.avatar"  :title="item.data.tuser.name" showBadge :thumb="item.data.tuser.avatar" thumb-size="lg" />
					<uni-list-item v-else :to="'detail?name='+item.data.name+'&tuid='+item.data.tuid+'&avatar='+item.data.avatar"  :title="item.data.name" showBadge :thumb="item.data.avatar" thumb-size="lg" />
				
				</template>


				</uni-list>
			</view>

		</scroll-view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				uid:"",
				tabbar: '0',
				inputvalue: "",
				wheight: "",
				bheight: "",
				top: "",
				list: [], // 超长的显示数据
				itemHeight: 67, // 每一列的高度
				showNum: 15, // 显示几条数据
				start: 0, // 滚动过程显示的开始索引
				end: 10, // 滚动过程显示的结束索引
				avatarList: [{
					url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png'
				}],
			}
		},
		onLoad() {
			
			uni.showLoading()
			this.uid = uni.getStorageSync('user').id
			
			const db = uniCloud.databaseForJQL()
			db.collection('friend').where(`data.did == "${this.uid}" || data.tuser.did == "${this.uid}"`).count().then((res) => {
				
				if(res.total == 0){
					uni.hideLoading()
					return
				}
				var pageSize = 32
				var page = Math.ceil(res.total / pageSize)
				for (var i = 0; i < page; i++) {
					if (i == 0) {
						db.collection('friend')
							.where(`data.did == "${this.uid}" || data.tuser.did == "${this.uid}"`)
							.limit(pageSize)
							.get().then((res) => {
								uni.hideLoading()
								 this.list = [...this.list, ...res.data]
							})
					} else {
						db.collection('friend')
							.where(`data.uid == "${this.uid}"`)
							.field("data.avatar,data.name,data.tuid")
							.skip(i * pageSize)
							.limit(pageSize)
							.get().then((res) => {
								uni.hideLoading()
								this.list = [...this.list, ...res.data]
							})
					}

				}
			
			})

			// db.collection('friend')
			// 	.skip(1700) // 跳过前20条
			// 	.limit(20) // 获取20条
			// 	.get().then((res) => {
			// 		console.log(res, "jjj")
			// 	})


			// const db = uniCloud.database()
			// db.collection('friend').get().then((res) => {
			// 	console.log(res)
			// 	db.collection('friend').count().then((res) => {
			// 		console.log(res,"jjj")
			// 	})

			// }).catch((err) => {

			// })

		},
		onShow() {
			if (!uni.getStorageSync('adduser')) {
				return
			}
			var count = 0
			var adduser = uni.getStorageSync('adduser')
			adduser.map(item => {

				count += item.istabbar
			})
			this.tabbar = count
			if (this.tabbar > 0) {
				uni.setTabBarBadge({
					index: 1,
					text: this.tabbar
				})
			} else {
				uni.removeTabBarBadge({
					index: 1
				})
			}


		},
		computed: {
			showList() {
				return this.list.slice(this.start, this.end);
			}
		},
		mounted() {

			this.wheight = this.itemHeight * this.showNum + 'px';
			this.bheight = this.itemHeight * this.list.length + 'px';

		},
		methods: {
			
			addsearch() {
				uni.showModal({
					editable: true,
					content: '',
					placeholderText: "输入都聊号或手机号",
					title: '搜',
					success: (res) => {
						if (res.confirm) {
							console.log('用户点击确定', res);
							console.log(uni.getStorageSync('user').id,"mmmm")
							if (res.content) {
								console.log(uni.getStorageSync('user').id,"mmmm")
								
								// this.http.adduser({
								// 	did:uni.getStorageSync('user').id,
								// 	id: res.content,
								// 	avatar: uni.getStorageSync('user').avatar,
								// 	name: uni.getStorageSync('user').name,
								// }).then(res => {
								// 	console.log(res)
								// }).catch(res => {
								// 	uni.showModal({
								// 		content: JSON.stringify(res)
								// 	})
								// })
							}
						}
					}
				})
			},
			addfire() {

				// const todo = uniCloud.importObject('textpush')
				// todo.getadd({
				// 	cid:uni.getStorageSync('getui_cid'),
				// 	user:{
				// 		avatar:uni.getStorageSync('user').avatar,
				// 		name:uni.getStorageSync('user').name,
				// 	},
				// }).then(res => {
				// 	console.log(res)
				// })


				uni.showModal({
					editable: true,
					content: '18420053587',
					placeholderText: "输入都聊号或手机号",
					title: '新盆友',
					success: (res) => {
						if (res.confirm) {
							if (res.content) {
								this.http.adduser({
									did:uni.getStorageSync('user').id,
									id: res.content,
									avatar: uni.getStorageSync('user').avatar,
									name: uni.getStorageSync('user').name,
								}).then(res => {}).catch(res => {
									uni.showModal({
										content: JSON.stringify(res)
									})
								})
							}
						}
					}
				})
			},
			scrollListener(e) {
				let scrollTop = e.detail.scrollTop
				this.start = Math.floor(scrollTop / this.itemHeight);
				this.end = this.start + this.showNum;
				this.top = this.start * this.itemHeight + 'px';
			}
		}
	}
</script>

<style>
	.list {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		list-style: none;
	}

	.list-wrap {
		height: calc(100vh - 50px);
	}
</style>